<!--
* @description 
* @fileName exchange.vue
* @author huangyu
* @date 2023/02/08 10:27:37
!-->
<template>
    <div class="app-container">
        <van-sticky>
            <van-search v-model="name" placeholder="请输入关键词" @search="changeData" @cancel="changeData" />
            <div>
                <van-dropdown-menu>
                    <van-dropdown-item :title="categoryTitle">
                        <vCategory @change="changeCategory"></vCategory>
                    </van-dropdown-item>
                    <van-dropdown-item v-model="pinzhi" :options="pzList" @change="changeData" />
                    <van-dropdown-item v-model="priceType" :options="priceList" @change="changeData" />
                    <van-dropdown-item title="物品等级" ref="item">
                        <van-cell center>
                            <template #right-icon>
                                <van-field v-model="levelMin" placeholder="请输入最小值" />
                            </template>
                        </van-cell>
                        <van-cell center>
                            <template #right-icon>
                                <van-field v-model="levelMax" placeholder="请输入最大值" />
                            </template>
                        </van-cell>
                        <div style="padding: 5px 16px;">
                            <van-button type="info" block round @click="onConfirm">
                                确认
                            </van-button>
                        </div>
                    </van-dropdown-item>
                </van-dropdown-menu>
            </div>
        </van-sticky>
        <div style="margin:10px 0;">
            <van-cell v-for="(item,index) in list" :key="index" is-link @click="showPopup(item)">
                <el-row>
                    <el-col :span="4">
                        <div style="height:36px;position: relative;cursor:pointer;">
                            <img :src="`https://7765-web-cloud0713-6g519i65f479e638-1301064135.tcb.qcloud.la/GamePublic/${item.icon}`" alt="">
                            <div class="zx-icon-bg"></div>
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <div>
                            <strong>{{ item.goodsName }}</strong>
                            <i class="el-icon-picture-outline color_blue" style="font-size:16px;" v-if="item.goodsImage"></i>
                        </div>
                        <div>
                            <strong class="color_danger" style="font-size:16px;margin-right:2px;display:inline-block;">{{item.money}}</strong>
                            <span style="color:#999;">
                                {{item.priceType=='1'?'金币':item.priceType=='2'?'炼器符':''}}
                            </span>
                            <span>{{item.strong?'+'+item.strong:''}}</span>
                        </div>
                        <div style="color:#999;font-size:12px;">
                            {{item.level}} {{item.typeStr}} {{item.pinzhi}}
                            {{item.classStr}} {{item.pinzhi}} <span class="color_blue">{{item.gameName}}</span>
                        </div>
                    </el-col>
                </el-row>
            </van-cell>
        </div>
        <van-popup v-model="showDetail" round position="bottom" :style="{ height: '45%' }">
            <vGoodsDetail :model="detailModel"></vGoodsDetail>
        </van-popup>
        <van-pagination v-model="pageindex" :total-items="total" :items-per-page="pagesize" @change="changePage" />
    </div>
</template>

<script>
import { get } from '@/common/app.js'
import vCategory from "@/components/app/zhuxian/category.vue"
import vGoodsDetail from "@/components/app/zhuxian/goodsDetail.vue"
export default {
    components: {vCategory,vGoodsDetail},
    data() {
        return {
            token: this.$store.state.token,
            list: [],
            pageindex: 1,
            pagesize: 20,
            total: 0,

            name: "",
            pinzhi: "",
            levelMin: "",
            levelMax: "",
            priceType: "",
            showDetail: false,
            detailModel: {},
            categoryTitle: "选择分类",
            categoryModel: "",
            pzList:[
                {text:"物品品质",value:"",},
                { text: '普通', value: '普通' },
                { text: '散仙', value: '散仙' },
                { text: '真仙', value: '真仙' },
            ],
            priceList:[
                {text:"价格类型",value:"",},
                { text: '金币', value: '1' },
                { text: '炼器符', value: '2' },
            ],
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        changeData(){
            this.pageindex = 1
            this.getData()
        },
        getData(){
            let params = {
                type: 'getBooth',
                api: 'api-booth-list-all',
                data: {
                    name: this.name,
                    pinzhi: this.pinzhi,
                    levelMin: this.levelMin,
                    levelMax: this.levelMax,
                    priceType: this.priceType,
                    class: this.categoryModel.parentId?this.categoryModel.parentId:"",
                    goodsType: this.categoryModel.id,
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            // console.log(params)
            get('game', params).then(res => {
                if (res) {
                    console.log(res)
                    this.list = res.list
                    this.total = res.total
                }
            })
        },
        changePage(value){
            this.pageIndex = value
            this.getData()
        },
        onConfirm(){
            this.$refs.item.toggle()
            this.changeData()
        },
        showPopup(row){
            this.showDetail = true
            this.detailModel = row
        },
        changeCategory(data){
            this.categoryModel = data
            this.categoryTitle = data.fieldValue
            this.getData()
        },
    },
}
</script>

<style scoped>

</style>